<template>
    <div class="alumni-list">
        <nav-header>
            <li class="zh-h5-nav">
                <div
                    :class="activePanel === 'comment-artical' ? 'active' : ''"
                    @click="changePanel('comment-artical')">普通文章</div>
                <div 
                    :class="activePanel === 'carousel-artical' ? 'active' : ''" 
                    @click="changePanel('carousel-artical')">轮播文章</div>
            </li>
        </nav-header>
        <zh-alumni-comment-artical v-if="activePanel === 'comment-artical'" />
        <zh-alumni-carousel-artical  v-if="activePanel === 'carousel-artical'" />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activePanel: 'comment-artical',
            }
        },
        methods: {
            changePanel(panel) {
                this.activePanel  = panel;
            },
        },
    }
</script>
<style lang="scss">
    .alumni-list {
        .zh-h5-nav {
            .active {
                color: #fff;
            }
        }
        .zh-h5-nav > div {
            display: inline-block;
            height: 26px;
            line-height: 26px;
            margin-right: 10px;
            padding: 0 10px;
            cursor: pointer;
        }
        .pointer{
            cursor:pointer;
        }
    }
</style>